<template>
    <div id="MyInformation">
        <!-- <div class="MyInformation-One">
            <img src="../assets/Mymi/MySetLeft.png" @click="getMymi">
            <span class="MyInformation-OneSpan">消息</span>
        </div> -->
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getMymi"></i>
            <span>消息</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="MyInformation-Box" v-for="item in MyInformationBox" >
            <div class="MyInformation-BoxOne" @click="getDetails(item.id)" >
                 <div class="MyInformation-BoxOneSpan">
                    <p>
                        <span>{{item.title}}</span>
                        <span>{{item.sendTime | ProofcreateTime}}</span>
                    </p>
                     <p>
                        <span class="MyInformation-spanThree" v-if="NewsShow">{{item.content}}</span>
                        <span class="MyInformation-spanThree" v-else>{{item.sketch}}</span>
                    </p>
                </div> 
                <div class="MyInformation-BoxOneImg">
                    <span>{{item.isread | unread}}</span>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
export default {
     name:"MyInformation",
    data() {
        return {
            OneImg:"5",
            OneTimeText: "2019-10-10",
            TwoSpnText: "你已成功接受 编号0001号订单，请及时处理，编号0001号订单，",
            MyInformationBox:[],
            MyuserId:"",//用户id
            source:"",
            NewsShow:true,
            value:"",
        }
    },
    created() {
        this.loadComments();
        this.source = this.$route.query.source
        this.value = this.$route.query.value
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
     destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    mounted(){
        let getid = this.$route.query.value
        if(getid == "one"){
            this.InformationOne();
            this.NewsShow = true;
        }
        if(getid == "two"){
            this.InformationTwo();
            this.NewsShow = true;
        }
        if(getid == "three"){
            this.InformationThree();
            this.NewsShow = false;
        }
    
    },
    filters:{
        ProofcreateTime (createTime){
            if(!!createTime){
                return createTime.substring(0,10);
            }
            else{
                return '';
            } 
        },
        unread(value){
            if(value == "Y"){
                return "已读"
            }
            else{
                return "未读"
            }
        }

    },
    methods: {
        //取出用户id
        loadComments() {
            var list = JSON.parse(localStorage.getItem("key"));
            this.MyuserId = list.userId;
        },
        getMymi(){
            this.$router.push("/MyInformation");
        },
        getDetails(i){
            this.$router.push({path:"/Details",query:{id:i,source:this.source,value:this.value}})
        },
        //任务接受
        InformationOne(){
            this.$axios.post("/me/message/meMessageList",{
                id:this.MyuserId
            }).then(res =>{
                // console.log("任务接受",res)
                this.MyInformationBox = res.data.data.meMessage;
                
            })
        },
        //提醒到账
        InformationTwo(){
            this.$axios.post("/me/message/meMessageMoneyList",{
                id:this.MyuserId
            }).then(res =>{
                // console.log("提醒到账",res)
                this.MyInformationBox = res.data.data.MeMessageMoney;
            })
        },
        //平台通知
        InformationThree(){
            this.$axios.post("/me/message/selectNoticeList",{
                 id:this.MyuserId
            }).then(res =>{
                // console.log("平台通知",res)
                this.MyInformationBox = res.data.data.NoticeList;
            })
        },
         goBack(){
            this.$router.push("/MyInformation");
        }
    },
}
</script>
<style lang="less" scoped>
#MyInformation{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    // .MyInformation-One{
    //     display: flex;
    //     line-height: .88rem;
    //     text-align: center;
    //     font-family: "PingFang-SC-Medium";
    //     background: white;
    //     img{
    //         width: .22rem;
    //         height: .36rem;
    //         margin: .26rem .3rem;
    //     }
    //     .MyInformation-OneSpan{
    //         margin-left: 2.6rem;
    //         font-size:.36rem;
    //     } 
    //     .MyInformation-TwoSpan{
    //         margin-left: 2.5rem;
    //         font-size: .24rem;
    //     } 
    // }
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF;
    }
    .MyInformation-Box{
        width: 100%;
        // height: 3.6rem;
        height: auto;
        margin-top: 0.1rem;
        background: white;
        .MyInformation-BoxOne{
            width: 100%;
            height: 1.2rem;
            display: flex;
            font-size: 0;
            .MyInformation-BoxOneImg{
                width: 1.4rem;
                height: 1.2rem;
                text-align: center;
                line-height: 1.2rem;
                span{
                    font-size: .3rem;
                    color: green; 
                }
            }
            .MyInformation-BoxOneSpan{
                width: 6.1rem;
                height: 1.2rem;
                margin-left: 0.3rem;
                p:nth-child(1){
                    width: 100%;
                    height: .8rem;
                    line-height: .8rem;
                    display: flex;
                    span:nth-child(1){
                        display: inline-block;
                        width: 4.2rem;
                        font-size: .32rem;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    span:nth-child(2){
                        display: inline-block;
                        font-size: .24rem;
                    }
                }
                p:nth-child(2){
                    width: 100%;
                    height: .4rem;
                    line-height: .4rem;
                    span{
                        display: block;
                        width: 5.68rem;
                        height: .4rem;
                        font-size: .24rem;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                }
               
            }
        }
    }

}
</style>